<template>
    <div>
        <el-card style="margin-bottom: 10px"><h1 style="padding: 0;margin: 0;color: #0000FF">正在推流的地址...</h1></el-card>
        <el-table
                border
                size="mini"
                :data="tableData"
                style="width: 100%">

            <el-table-column
                    width="255px"
                    align="center"
                    label="唯一令牌"
                    prop="token">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="视频流地址"
                    prop="url">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="点击播放" placement="top-start">
<!--                        <span class="urls" @click="openVideo(scope.row.url,scope.row.token,scope.row.httpUrl)">{{scope.row.url}}</span>-->
                        <el-button type="primary" size="mini" @click="openVideo(scope.row.url,scope.row.token,scope.row.httpUrl,typeOptions.http)">http播放</el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="点击播放" placement="top-start">
<!--                        <span class="urls" @click="openVideo(scope.row.url,scope.row.token,scope.row.httpUrl)">{{scope.row.url}}</span>-->
                        <el-button type="primary" size="mini" @click="openVideo(scope.row.url,scope.row.token,scope.row.httpUrl,typeOptions.rtmp)">rtmp播放</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="rtsp地址"
                    prop="rtsp">
            </el-table-column>
            <el-table-column
                    width="90px"
                    align="center"
                    label="推流任务数"
                    prop="count">
            </el-table-column>
            <el-table-column
                    width="100px"
                    align="center"
                    label="摄像头IP"
                    prop="ip">
            </el-table-column>
            <el-table-column
                    width="200px"
                    align="center">
                <template #header>
                    操作
                </template>
                <template slot-scope="scope">
                    <p>
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleKeepAlive(scope.$index, scope.row)">保活
                        </el-button>
                        <el-button
                                size="mini"
                                style="background: #FC011A;color: white"
                                @click="handleCloseStream(scope.$index, scope.row)">关闭流
                        </el-button>
                    </p>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                :key="key"
                :title="type+'播放'"
                :visible.sync="dialogVisible"
                width="40%"
        >
            <m-video :url="url" :type="type"></m-video>
        </el-dialog>
    </div>
</template>

<script>
    import {closeStream, getStreams, keepAliveStream} from "../../api/video-stream";
    import mVideo from '@/components/video'
    export default {
        name: "index",
        components:{
            mVideo
        },
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                key: 0,
                url: '',
                typeOptions:{
                    http: 'http',
                    rtmp: 'rtmp'
                },
                type: 'http'
            }
        },
        created() {
            this.getStreamList()
        },
        methods: {
            /**
             * 打开视频播放
             * @param url rtmp播放地址
             * @param key 唯一Key
             * @param httpUrl http播放地址
             * @param type 播放方式：http播放、rtmp播放（需要flash插件）
             */
            openVideo(url,key,httpUrl,type){
                this.dialogVisible = true
                this.key = new Date().getSeconds()
                this.type = type
                if (this.type === this.typeOptions.http){
                    this.url = httpUrl
                }else {
                    this.url = url
                }
            },
            getStreamList() {
                getStreams().then(res => {
                    console.log(res)
                    this.tableData = res.data.map(stram =>{
                        // stram.url = stram.url.replace(/127.0.0.1/g,'192.168.1.125')
                        return stram;
                    })
                })
            },
            handleKeepAlive(index, row) {
                this.$confirm('是否要将此视频流保活？','提示',{
                    cancelButtonText:'取消',
                    confirmButtonText: '确定',
                    type: "warning"
                }).then(() =>{
                    keepAliveStream(row.token).then(res =>{
                        this.$message({
                            message: res.message,
                            type: "success"
                        })
                        this.getStreamList()
                    })
                })
            },
            handleCloseStream(index, row) {
                this.$confirm('是否要将此视频流删除一个任务？当任务数为0时,此视频流将在1分钟后关闭','提示',{
                    cancelButtonText:'取消',
                    confirmButtonText: '确定',
                    type: "warning"
                }).then(() =>{
                    closeStream(row.token).then(res =>{
                        this.$message({
                            message: res.message,
                            type: "success"
                        })
                    })
                    this.getStreamList()
                })
            }

        }
    }
</script>

<style scoped lang="less">

    .urls:hover{
        color: #4c4cea;
        cursor:pointer;
    }
</style>
